<template>
  <div class="titleList">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>产品颜色：
      <div class="textC marT">(最多添加40个)</div>
    </div>
    <!-- 循环获取颜色 -->
    <div class="titleDetail">
      <div class="checkItem" v-for="(item, index) in colorList" :key="index">
        <w-radio name="color" :label="item.specpropertyName" v-model="specpropertyBindName" @on-radio="emitToParent">
          <span class="color-group">
            <span class="color-box" :style="{'background-color': `${item.colorCode}`}" v-if="!item.isDel"></span> {{item.specpropertyName}}
          </span>
        </w-radio>
        <i class="u-sku-del" v-if="item.isDel" @click="colorList.splice(index, 1)"></i>
      </div>
      <!-- 其他 -->
      <div class="addNewOther">
        <div class="addNewC" v-show="!showInput" @click="showInput = true">
          <img src="../../../assets/new/btn_add.png" alt="" class="addBtnP">
          <span>其他</span>
        </div>
        <!-- 新增显示输入框 -->
        <div class="addNewC" v-show="showInput">
          <w-input holder="颜色名称" rule="isGoodsName" error="请输入中文，字母，数字或其组合" v-model="specpropertyName"></w-input>
          <button class="btn btnAdd" type="button" @click="addNewColor">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        // 是否展示颜色输入框
        showInput: false,
        // 颜色尺码
        colorList: [],
        // 颜色
        specpropertyName: '',
        specpropertyBindName: ''
      }
    },
    created() {
      this.colorList = this.list
      if (this.$route.query.sketchid) {
        this.specpropertyName = this.colorList[0].specpropertyName
      }
    },
    methods: {
      addNewColor() {
        // 如果没有输入颜色，则直接抛出
        if (!this.specpropertyName) {
          this.$toast('请输入颜色')
          return
        }
        let isInList = this.colorList.filter(v => {
          return v.specpropertyName == this.specpropertyName
        })
        // 如果当前输入的颜色，已经输入过
        if (isInList.length > 0) {
          this.$toast('此颜色已经在列表中，请重新换一种颜色')
          return
        }
        this.colorList.push({
          specpropertyName: this.specpropertyName,
          isDel: true
        })
        this.specpropertyName = ''
        this.showInput = false
      },
      /**
       * 将点击的结果通知给父组件
       */
      emitToParent() {
        this.colorList.forEach(v => {
          if (v.specpropertyName == this.specpropertyBindName) {
            this.$emit('select', v)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleList {
    .color-group {
      display: inline-block;
      float: right;
      line-height: 18px;

      .color-box {
        border: 1px solid #d9d7d7;
        display: inline-block;
        width: 10px;
        height: 10px;
      }
    }
  }
</style>